<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
</head>
<body>
    <!--JavaScript 能够改变 HTML 属性-->
    <img id="myImage" src="../eg_bulboff.jpg" style="text-align: center;"/>
    <br/>
    <button onclick="document.getElementById('myImage').src='../eg_bulbon.jpg'">开灯</button>
    <button onclick="document.getElementById('myImage').src='../eg_bulboff.jpg'">关灯</button>
    <br/><br/>
    <!--JavaScript 能够改变 HTML 样式 (CSS)-->
    <p id="demo">JavaScript改变HTML 元素的样式。</p>
    <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
        点击！
    </button>
    <br/><br/>
    <!--avaScript显示和隐藏HTML元素-->
    <p id="demo1" style="display:none">Hello JavaScript!</p>
    <button type="button" onclick="document.getElementById('demo1').style.display='block'">
        显示！
    </button>
    <button type="button" onclick="document.getElementById('demo1').style.display='none'">
        隐藏！
    </button>



</body>
</html>